import PropTypes from 'prop-types';
import React, { PureComponent } from 'react';
import styled, { keyframes } from 'styled-components';
import { createPortal } from 'react-dom';

// 标尺中每小格代表的宽度(根据scale的不同实时变化)
var getGridSize = function getGridSize(scale: number) {
  if (scale <= 0.25) return 40;
  if (scale <= 0.5) return 20;
  if (scale <= 1) return 10;
  if (scale <= 2) return 5;
  if (scale <= 4) return 2;
  return 1;
};

var FONT_SCALE = 0.83; // 10 / 12

var drawHorizontalRuler = function drawHorizontalRuler(ctx, start, shadow, options) {
  var scale = options.scale,
    width = options.width,
    height = options.height,
    canvasConfigs = options.canvasConfigs;
  var bgColor = canvasConfigs.bgColor,
    fontColor = canvasConfigs.fontColor,
    shadowColor = canvasConfigs.shadowColor,
    ratio = canvasConfigs.ratio,
    longfgColor = canvasConfigs.longfgColor,
    shortfgColor = canvasConfigs.shortfgColor;

  // 缩放ctx, 以简化计算

  ctx.scale(ratio, ratio);
  ctx.clearRect(0, 0, width, height);

  // 1. 画标尺底色
  ctx.fillStyle = bgColor;
  ctx.fillRect(0, 0, width, height);

  // 2. 画阴影
  if (shadow) {
    var shadowX = (shadow.x - start) * scale; // 阴影起点坐标
    var shadowWidth = shadow.width * scale; // 阴影宽度
    ctx.fillStyle = shadowColor;
    ctx.fillRect(shadowX, 0, shadowWidth, height * 3 / 8);
  }

  var gridSize = getGridSize(scale); // 每小格表示的宽度
  var gridPixel = gridSize * scale;
  var gridSize_10 = gridSize * 10; // 每大格表示的宽度
  var gridPixel_10 = gridSize_10 * scale;

  var startValue = Math.floor(start / gridSize) * gridSize; // 绘制起点的刻度(略小于start, 且是gridSize的整数倍)
  var startValue_10 = Math.floor(start / gridSize_10) * gridSize_10; // 长间隔绘制起点的刻度(略小于start, 且是gridSize_10的整数倍)

  var offsetX = (startValue - start) / gridSize * gridPixel; // 起点刻度距离ctx原点(start)的px距离
  var offsetX_10 = (startValue_10 - start) / gridSize_10 * gridPixel_10; // 长间隔起点刻度距离ctx原点(start)的px距离
  var endValue = start + Math.ceil(width / scale); // 终点刻度(略超出标尺宽度即可)

  // 3. 画刻度和文字(因为刻度遮住了阴影)
  ctx.beginPath(); // 一定要记得开关路径,因为clearRect并不能清除掉路径,如果不关闭路径下次绘制时会接着上次的绘制

  ctx.fillStyle = fontColor;
  ctx.strokeStyle = longfgColor;

  // 长间隔和短间隔需要两次绘制，才可以完成不同颜色的设置；分开放到两个for循环是为了节省性能，因为如果放到一个for循环的话，每次循环都会重新绘制操作dom
  // 绘制长间隔和文字
  for (var value = startValue_10, count = 0; value < endValue; value += gridSize_10, count++) {
    var x = offsetX_10 + count * gridPixel_10 + 0.5; // prevent canvas 1px line blurry
    ctx.moveTo(x, 0);
    ctx.save();
    ctx.translate(x, height * 0.4);
    ctx.scale(FONT_SCALE / ratio, FONT_SCALE / ratio);
    ctx.fillText(value, 4 * ratio, 7 * ratio);
    ctx.restore();
    ctx.lineTo(x, height * 9 / 16);
  }
  ctx.stroke();
  ctx.closePath();

  // 绘制短间隔
  ctx.beginPath();
  ctx.strokeStyle = shortfgColor;
  for (var _value = startValue, _count = 0; _value < endValue; _value += gridSize, _count++) {
    var _x = offsetX + _count * gridPixel + 0.5; // prevent canvas 1px line blurry
    ctx.moveTo(_x, 0);
    if (_value % gridSize_10 !== 0) {
      ctx.lineTo(_x, height * 1 / 4);
    }
  }
  ctx.stroke();
  ctx.closePath();

  // 恢复ctx matrix
  ctx.setTransform(1, 0, 0, 1, 0, 0);
};

var drawVerticalRuler = function drawVerticalRuler(ctx, start, shadow, options) {
  var scale = options.scale,
    width = options.width,
    height = options.height,
    canvasConfigs = options.canvasConfigs;
  var bgColor = canvasConfigs.bgColor,
    fontColor = canvasConfigs.fontColor,
    shadowColor = canvasConfigs.shadowColor,
    ratio = canvasConfigs.ratio,
    longfgColor = canvasConfigs.longfgColor,
    shortfgColor = canvasConfigs.shortfgColor;

  // 缩放ctx, 以简化计算

  ctx.scale(ratio, ratio);
  ctx.clearRect(0, 0, width, height);

  // 1. 画标尺底色
  ctx.fillStyle = bgColor;
  ctx.fillRect(0, 0, width, height);

  // 2. 画阴影
  if (shadow) {
    // 阴影起点坐标
    var posY = (shadow.y - start) * scale;
    // 阴影高度
    var shadowHeight = shadow.height * scale;
    ctx.fillStyle = shadowColor;
    ctx.fillRect(0, posY, width * 3 / 8, shadowHeight);
  }

  var gridSize = getGridSize(scale); // 每小格表示的宽度
  var gridPixel = gridSize * scale;
  var gridSize_10 = gridSize * 10; // 每大格表示的宽度
  var gridPixel_10 = gridSize_10 * scale;

  var startValue = Math.floor(start / gridSize) * gridSize; // 绘制起点的刻度(略小于start, 且是gridSize的整数倍)
  var startValue_10 = Math.floor(start / gridSize_10) * gridSize_10; // 长间隔单独绘制起点的刻度

  var offsetY = (startValue - start) / gridSize * gridPixel; // 起点刻度距离ctx原点(start)的px距离
  var offsetY_10 = (startValue_10 - start) / gridSize_10 * gridPixel_10; // 长间隔起点刻度距离ctx原点(start)的px距离
  var endValue = start + Math.ceil(height / scale); // 终点刻度(略超出标尺宽度即可)

  // 3. 画刻度和文字(因为刻度遮住了阴影)
  ctx.beginPath(); // 一定要记得开关路径,因为clearRect并不能清除掉路径,如果不关闭路径下次绘制时会接着上次的绘制

  ctx.fillStyle = fontColor;
  ctx.strokeStyle = longfgColor; // 设置长间隔的颜色

  for (var value = startValue_10, count = 0; value < endValue; value += gridSize_10, count++) {
    var y = offsetY_10 + count * gridPixel_10 + 0.5;
    ctx.moveTo(0, y);
    ctx.save(); // 这里先保存一下状态
    ctx.translate(width * 0.4, y); // 将原点转移到当前画笔所在点
    ctx.rotate(-Math.PI / 2); // 旋转 -90 度
    ctx.scale(FONT_SCALE / ratio, FONT_SCALE / ratio); // 缩放至10px
    ctx.fillText(value, 4 * ratio, 7 * ratio); // 绘制文字
    // 回复刚刚保存的状态
    ctx.restore();
    ctx.lineTo(width * 9 / 16, y);
  }
  ctx.stroke(); // 绘制
  ctx.closePath(); // 长间隔和文字绘制关闭

  ctx.beginPath(); // 开始绘制短间隔
  ctx.strokeStyle = shortfgColor;

  for (var _value2 = startValue, _count2 = 0; _value2 < endValue; _value2 += gridSize, _count2++) {
    var _y = offsetY + _count2 * gridPixel + 0.5;
    ctx.moveTo(0, _y);
    if (_value2 % gridSize_10 !== 0) {
      ctx.lineTo(width * 1 / 4, _y);
    }
  }
  ctx.stroke();
  ctx.closePath();

  // 恢复ctx matrix
  ctx.setTransform(1, 0, 0, 1, 0, 0);
};

var classCallCheck = function (instance, Constructor) {
  if (!(instance instanceof Constructor)) {
    throw new TypeError("Cannot call a class as a function");
  }
};

var createClass = function () {
  function defineProperties(target, props) {
    for (var i = 0; i < props.length; i++) {
      var descriptor = props[i];
      descriptor.enumerable = descriptor.enumerable || false;
      descriptor.configurable = true;
      if ("value" in descriptor) descriptor.writable = true;
      Object.defineProperty(target, descriptor.key, descriptor);
    }
  }

  return function (Constructor?:any, protoProps?:any, staticProps?:any) {
    if (protoProps) defineProperties(Constructor.prototype, protoProps);
    if (staticProps) defineProperties(Constructor, staticProps);
    return Constructor;
  };
}();

var _extends = Object.assign || function (target) {
  for (var i = 1; i < arguments.length; i++) {
    var source = arguments[i];

    for (var key in source) {
      if (Object.prototype.hasOwnProperty.call(source, key)) {
        target[key] = source[key];
      }
    }
  }

  return target;
};

var inherits = function (subClass, superClass) {
  if (typeof superClass !== "function" && superClass !== null) {
    throw new TypeError("Super expression must either be null or a function, not " + typeof superClass);
  }

  subClass.prototype = Object.create(superClass && superClass.prototype, {
    constructor: {
      value: subClass,
      enumerable: false,
      writable: true,
      configurable: true
    }
  });
  if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass;
};

var possibleConstructorReturn = function (self, call) {
  if (!self) {
    throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
  }

  return call && (typeof call === "object" || typeof call === "function") ? call : self;
};

var taggedTemplateLiteral = function (strings, raw) {
  return Object.freeze(Object.defineProperties(strings, {
    raw: {
      value: Object.freeze(raw)
    }
  }));
};

var toConsumableArray = function (arr) {
  if (Array.isArray(arr)) {
    for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) arr2[i] = arr[i];

    return arr2;
  } else {
    return Array.from(arr);
  }
};

var getValueByOffset = function getValueByOffset(offset, start, scale) {
  return Math.round(start + offset / scale);
};

var CanvasRuler = function (_PureComponent) {
  inherits(CanvasRuler, _PureComponent);

  function CanvasRuler() {
    var _ref;

    var _temp, _this, _ret;

    classCallCheck(this, CanvasRuler);

    for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
      args[_key] = arguments[_key];
    }

    return _ret = (_temp = (_this = possibleConstructorReturn(this, (_ref = CanvasRuler.__proto__ || Object.getPrototypeOf(CanvasRuler)).call.apply(_ref, [this].concat(args))), _this), _this.setCanvasRef = function (ref) {
      _this.$canvas = ref;
      _this.canvasContext = ref && ref.getContext('2d');
    }, _this.handleClick = function (e) {
      var _this$props = _this.props,
        vertical = _this$props.vertical,
        scale = _this$props.scale,
        start = _this$props.start,
        onAddLine = _this$props.onAddLine;

      var offset = vertical ? e.nativeEvent.offsetY : e.nativeEvent.offsetX;
      onAddLine(getValueByOffset(offset, start, scale));
    }, _this.handleEnter = function (e) {
      var _this$props2 = _this.props,
        vertical = _this$props2.vertical,
        scale = _this$props2.scale,
        start = _this$props2.start,
        onIndicatorShow = _this$props2.onIndicatorShow;

      var offset = vertical ? e.nativeEvent.offsetY : e.nativeEvent.offsetX;
      onIndicatorShow(getValueByOffset(offset, start, scale));
    }, _this.handleMove = function (e) {
      var _this$props3 = _this.props,
        vertical = _this$props3.vertical,
        scale = _this$props3.scale,
        start = _this$props3.start,
        onIndicatorMove = _this$props3.onIndicatorMove;

      var offset = vertical ? e.nativeEvent.offsetY : e.nativeEvent.offsetX;
      onIndicatorMove(getValueByOffset(offset, start, scale));
    }, _this.handleLeave = function () {
      return _this.props.onIndicatorHide();
    }, _this.handleRightMenu = function (e) {
      e.stopPropagation();
      if (e.button === 2) {
        var onhandleShowRightMenu = _this.props.onhandleShowRightMenu;

        var clickLeft = e.clientX;
        var clickTop = e.clientY;
        onhandleShowRightMenu(clickLeft, clickTop);
      }
    }, _temp), possibleConstructorReturn(_this, _ret);
  }

  createClass(CanvasRuler, [{
    key: 'componentDidMount',
    value: function componentDidMount() {
      this.updateCanvasContext();
      this.drawRuler();
    }
  }, {
    key: 'componentDidUpdate',
    value: function componentDidUpdate(prevProps) {
      if (prevProps.width !== this.props.width || prevProps.height !== this.props.height) {
        this.updateCanvasContext();
      }
      this.drawRuler();
    }
  }, {
    key: 'updateCanvasContext',
    value: function updateCanvasContext() {
      var _props = this.props,
        width = _props.width,
        height = _props.height,
        canvasConfigs = _props.canvasConfigs;
      var ratio = canvasConfigs.ratio;

      // 比例宽高

      this.$canvas.width = width * ratio;
      this.$canvas.height = height * ratio;

      var ctx = this.$canvas.getContext('2d');
      ctx.font = 12 * ratio + 'px -apple-system, "Helvetica Neue", ".SFNSText-Regular", "SF UI Text", Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Zen Hei", sans-serif';
      ctx.lineWidth = 1;
      ctx.textBaseline = 'middle';
    }
  }, {
    key: 'drawRuler',
    value: function drawRuler() {
      var _props2 = this.props,
        start = _props2.start,
        scale = _props2.scale,
        width = _props2.width,
        height = _props2.height,
        selectStart = _props2.selectStart,
        selectLength = _props2.selectLength,
        canvasConfigs = _props2.canvasConfigs;

      var options = { scale: scale, width: width, height: height, canvasConfigs: canvasConfigs };
      if (this.props.vertical) {
        drawVerticalRuler(this.canvasContext, start, { y: selectStart, height: selectLength }, options);
      } else {
        drawHorizontalRuler(this.canvasContext, start, { x: selectStart, width: selectLength }, options);
      }
    }
  }, {
    key: 'render',
    value: function render() {
      return React.createElement('canvas', { className: 'ruler',
        ref: this.setCanvasRef,
        onClick: this.handleClick,
        onMouseEnter: this.handleEnter,
        onMouseDown: this.handleRightMenu,
        onMouseMove: this.handleMove,
        onMouseLeave: this.handleLeave
      });
    }
  }]);
  return CanvasRuler;
}(PureComponent);

CanvasRuler.propTypes = {
  vertical: PropTypes.bool,
  start: PropTypes.number,
  scale: PropTypes.number,
  width: PropTypes.number,
  height: PropTypes.number,
  canvasConfigs: PropTypes.object,
  selectStart: PropTypes.number,
  selectLength: PropTypes.number,
  onAddLine: PropTypes.func,
  onIndicatorShow: PropTypes.func,
  onIndicatorMove: PropTypes.func,
  onIndicatorHide: PropTypes.func,
  onhandleShowRightMenu: PropTypes.func
};

var Line = function (_PureComponent) {
  inherits(Line, _PureComponent);

  function Line(props) {
    classCallCheck(this, Line);

    var _this = possibleConstructorReturn(this, (Line.__proto__ || Object.getPrototypeOf(Line)).call(this, props));

    _this.handleDown = function (e) {
      var _this$props = _this.props,
        vertical = _this$props.vertical,
        index = _this$props.index,
        scale = _this$props.scale,
        onMouseDown = _this$props.onMouseDown,
        onRelease = _this$props.onRelease;
      var startValue = _this.state.value;

      var startD = vertical ? e.clientY : e.clientX;
      onMouseDown();
      var onMove = function onMove(e) {
        var currentD = vertical ? e.clientY : e.clientX;
        var newValue = Math.round(startValue + (currentD - startD) / scale);
        _this.setState({ value: newValue });
      };
      var onEnd = function onEnd() {
        onRelease(_this.state.value, index);
        document.removeEventListener('mousemove', onMove);
        document.removeEventListener('mouseup', onEnd);
      };
      document.addEventListener('mousemove', onMove);
      document.addEventListener('mouseup', onEnd);
    };

    _this.handleRemove = function () {
      var _this$props2 = _this.props,
        index = _this$props2.index,
        onRemove = _this$props2.onRemove;

      onRemove(index);
    };

    _this.state = {
      value: props.value
    };
    return _this;
  }

  createClass(Line, [{
    key: 'render',
    value: function render() {
      var _props = this.props,
        vertical = _props.vertical,
        start = _props.start,
        scale = _props.scale;
      var value = this.state.value;

      var offset = (value - start) * scale;
      if (offset < 0) return null;
      var lineStyle = vertical ? { top: offset } : { left: offset };

      return React.createElement(
        'div',
        { className: 'line', style: lineStyle, onMouseDown: this.handleDown },
        React.createElement(
          'div',
          { className: 'action' },
          React.createElement(
            'span',
            { className: 'del', onClick: this.handleRemove },
            '\xD7'
          ),
          React.createElement(
            'span',
            { className: 'value' },
            value
          )
        )
      );
    }
  }]);
  return Line;
}(PureComponent);

Line.propTypes = {
  index: PropTypes.number,
  start: PropTypes.number,
  vertical: PropTypes.bool,
  scale: PropTypes.number,
  value: PropTypes.number,
  onRemove: PropTypes.func,
  onMouseDown: PropTypes.func,
  onRelease: PropTypes.func
};

var RulerWrapper = function (_PureComponent) {
  inherits(RulerWrapper, _PureComponent);

  function RulerWrapper() {
    classCallCheck(this, RulerWrapper);

    var _this = possibleConstructorReturn(this, (RulerWrapper.__proto__ || Object.getPrototypeOf(RulerWrapper)).call(this));

    _this.handleIndicatorShow = function (value) {
      return !_this.state.isDraggingLine && _this.setState({ showIndicator: true, value: value });
    };

    _this.handleIndicatorMove = function (value) {
      return _this.state.showIndicator && _this.setState({ value: value });
    };

    _this.handleIndicatorHide = function () {
      return _this.setState({ showIndicator: false });
    };

    _this.handleNewLine = function (value) {
      var _this$props = _this.props,
        vertical = _this$props.vertical,
        lines = _this$props.lines,
        onLineChange = _this$props.onLineChange,
        handleShowReferLine = _this$props.handleShowReferLine,
        isShowReferLine = _this$props.isShowReferLine;

      lines.push(value);
      onLineChange(lines, vertical);
      !isShowReferLine && handleShowReferLine();
    };

    _this.handleLineDown = function () {
      return _this.setState({ isDraggingLine: true });
    };

    _this.handleLineRelease = function (value, index) {
      _this.setState({ isDraggingLine: false });
      // 左右或上下超出时, 删除该条对齐线
      var _this$props2 = _this.props,
        vertical = _this$props2.vertical,
        start = _this$props2.start,
        scale = _this$props2.scale,
        width = _this$props2.width,
        height = _this$props2.height;

      var offset = value - start;
      var maxOffset = (vertical ? height : width) / scale;

      if (offset < 0 || offset > maxOffset) {
        _this.handleLineRemove(index);
      } else {
        var _this$props3 = _this.props,
          lines = _this$props3.lines,
          onLineChange = _this$props3.onLineChange;

        lines[index] = value;
        onLineChange(lines, vertical);
      }
    };

    _this.handleLineRemove = function (index) {
      var _this$props4 = _this.props,
        vertical = _this$props4.vertical,
        lines = _this$props4.lines,
        onLineChange = _this$props4.onLineChange;

      lines.splice(index, 1);
      onLineChange(lines, vertical);
    };

    _this.onhandleShowRightMenu = function (left, top) {
      var _this$props5 = _this.props,
        onShowRightMenu = _this$props5.onShowRightMenu,
        vertical = _this$props5.vertical;

      onShowRightMenu(left, top, vertical);
    };

    _this.state = {
      isDraggingLine: false,
      showIndicator: false,
      value: 0
    };
    return _this;
  }
  // 展示右键菜单
  createClass(RulerWrapper, [{
    key: 'render',
    value: function render() {
      var _this2 = this;

      var _props = this.props,
        vertical = _props.vertical,
        scale = _props.scale,
        width = _props.width,
        height = _props.height,
        start = _props.start,
        selectStart = _props.selectStart,
        selectLength = _props.selectLength,
        lines = _props.lines,
        canvasConfigs = _props.canvasConfigs,
        isShowReferLine = _props.isShowReferLine;
      var _state = this.state,
        showIndicator = _state.showIndicator,
        value = _state.value;

      var className = vertical ? 'v-container' : 'h-container';

      var indicatorOffset = (value - start) * scale;
      var indicatorStyle = vertical ? { top: indicatorOffset } : { left: indicatorOffset };

      return React.createElement(
        'div',
        { className: className },
        React.createElement(CanvasRuler, {
          vertical: vertical,
          scale: scale,
          width: width,
          height: height,
          start: start,
          selectStart: selectStart,
          selectLength: selectLength,
          canvasConfigs: canvasConfigs,
          onAddLine: this.handleNewLine,
          onIndicatorShow: this.handleIndicatorShow,
          onIndicatorMove: this.handleIndicatorMove,
          onIndicatorHide: this.handleIndicatorHide,
          onhandleShowRightMenu: this.onhandleShowRightMenu
        }),
        isShowReferLine && React.createElement(
        'div',
        { className: 'lines' },
        (lines || []).map(function (v, i) {
          return React.createElement(Line, {
            key: v + i,
            index: i,
            value: v >> 0,
            scale: scale,
            start: start,
            vertical: vertical,
            onRemove: _this2.handleLineRemove,
            onMouseDown: _this2.handleLineDown,
            onRelease: _this2.handleLineRelease
          });
        })
        ),
        showIndicator && React.createElement(
        'div',
        { className: 'indicator', style: indicatorStyle },
        React.createElement(
          'span',
          { className: 'value' },
          value
        )
        )
      );
    }
  }]);
  return RulerWrapper;
}(PureComponent);

RulerWrapper.propTypes = {
  vertical: PropTypes.bool,
  scale: PropTypes.number,
  width: PropTypes.number,
  height: PropTypes.number,
  start: PropTypes.number,
  lines: PropTypes.array,
  selectStart: PropTypes.number,
  selectLength: PropTypes.number,
  canvasConfigs: PropTypes.object,
  onLineChange: PropTypes.func,
  onShowRightMenu: PropTypes.func,
  isShowReferLine: PropTypes.bool,
  handleShowReferLine: PropTypes.func
};

var i18nObj = {
  'zh-CN': {
    vertical: '纵向',
    horizontal: '横向',
    show_ruler: '显示标尺',
    show_refer_line: '显示参考线',
    remove_all: '删除所有',
    refer_line: '参考线'
  },
  'en': {
    vertical: 'vertical',
    horizontal: 'horizontal',
    show_ruler: 'show rulers',
    show_refer_line: 'show all guides',
    remove_all: 'remove all ',
    refer_line: ' guides'
  }
};

var _templateObject = taggedTemplateLiteral(['\n  from {\n    opacity: 0;\n    transform: scale(0.8);\n  }\n  to {\n    opacity: 1;\n    transform: scale(1);\n  }\n'], ['\n  from {\n    opacity: 0;\n    transform: scale(0.8);\n  }\n  to {\n    opacity: 1;\n    transform: scale(1);\n  }\n']),
  _templateObject2 = taggedTemplateLiteral(['\n  from {\n    opacity: 1;\n    transform: scale(1);\n  }\n  to {\n    opacity: 0;\n    transform: scale(0.8);\n  }\n'], ['\n  from {\n    opacity: 1;\n    transform: scale(1);\n  }\n  to {\n    opacity: 0;\n    transform: scale(0.8);\n  }\n']),
  _templateObject3 = taggedTemplateLiteral(['\n  position: fixed;\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  box-shadow: 0 2px 10px 0 rgba(39,54,78,0.08), 0 12px 40px 0 rgba(39,54,78,0.10);\n  background: ', ';\n  border-radius: 2px;\n  z-index: 4;\n  padding: 6px 0;\n  transition: opacity 0.2s ease-in-out;\n  transform-origin: 0 0;\n  animation: ', ' 0.2s;\n  animation-fill-mode: forwards;\n  z-index: 999;\n  &.hide-menu {\n    animation: ', ' 0.1s;\n    animation-fill-mode: forwards;\n    z-index: -9999;\n  }\n  .divider {\n    margin: 4px 12px;\n    border-top: 1px solid ', ';\n    min-width: ', ';\n  }\n  .menu-content {\n    font-size: 12px;\n    font-family: PingFangSC;\n    color: ', ';\n    background: ', ';\n    display: inline-block;\n    width: 100%;\n    height: 26px;\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    padding: 0 12px;\n    cursor: pointer;\n    svg > path {\n      fill: ', ';\n    }\n    &.disabled {\n      color: ', ';\n      &:hover {\n        cursor: not-allowed;\n        background: none;\n        color: ', ';\n      }\n    }\n  }\n  .menu-content:hover {\n    background: ', ';\n    cursor: pointer;\n    color: ', ';\n\n    svg > path {\n      fill: ', ';\n    }\n  }\n'], ['\n  position: fixed;\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  box-shadow: 0 2px 10px 0 rgba(39,54,78,0.08), 0 12px 40px 0 rgba(39,54,78,0.10);\n  background: ', ';\n  border-radius: 2px;\n  z-index: 4;\n  padding: 6px 0;\n  transition: opacity 0.2s ease-in-out;\n  transform-origin: 0 0;\n  animation: ', ' 0.2s;\n  animation-fill-mode: forwards;\n  z-index: 999;\n  &.hide-menu {\n    animation: ', ' 0.1s;\n    animation-fill-mode: forwards;\n    z-index: -9999;\n  }\n  .divider {\n    margin: 4px 12px;\n    border-top: 1px solid ', ';\n    min-width: ', ';\n  }\n  .menu-content {\n    font-size: 12px;\n    font-family: PingFangSC;\n    color: ', ';\n    background: ', ';\n    display: inline-block;\n    width: 100%;\n    height: 26px;\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    padding: 0 12px;\n    cursor: pointer;\n    svg > path {\n      fill: ', ';\n    }\n    &.disabled {\n      color: ', ';\n      &:hover {\n        cursor: not-allowed;\n        background: none;\n        color: ', ';\n      }\n    }\n  }\n  .menu-content:hover {\n    background: ', ';\n    cursor: pointer;\n    color: ', ';\n\n    svg > path {\n      fill: ', ';\n    }\n  }\n']),
  _templateObject4 = taggedTemplateLiteral(['\n  position: absolute;\n  width: 100%; /* scrollbar width */\n  height: 100%;\n  z-index: 3; /* \u9700\u8981\u6BD4resizer\u9AD8 */\n  pointer-events: none;\n  font-size: 12px;\n  overflow: hidden;\n  span {\n    line-height: 1;\n  }\n\n  .corner {\n    position: absolute;\n    left: 0;\n    top: 0;\n    width: ', ';\n    height: ', ';\n    border-right: 1px solid ', ';\n    border-bottom: 1px solid ', ';\n    pointer-events: auto;\n    cursor: pointer;\n    transition: all 0.2s ease-in-out;\n    box-sizing: content-box;\n    &.active {\n      background-color: ', ' !important;\n    }\n  }\n\n  .indicator {\n    position: absolute;\n    pointer-events: none;\n    .value {\n      position: absolute;\n      background: white;\n    }\n  }\n\n  .ruler {\n    width: 100%;\n    height: 100%;\n    pointer-events: auto;\n  }\n\n  .line {\n    position: absolute;\n    .action {\n      position: absolute;\n      display: flex;\n      justify-content: center;\n      align-items: center;\n    }\n\n    .value {\n      pointer-events: none;\n      transform: scale(0.83);\n    }\n    .del {\n      cursor: pointer;\n      padding: 3px 5px;\n      visibility: hidden;\n    }\n    &:hover .del {\n      visibility: visible;\n    }\n  }\n\n  .h-container, .v-container {\n    position: absolute;\n    .lines {\n      pointer-events: none;\n    }\n    &:hover .lines {\n      pointer-events: auto;\n    }\n  }\n\n  .h-container {\n    left: ', ';\n    top: 0;\n    width: calc(100% - ', ');\n    height: ', ';\n\n    .line {\n      height: 100vh;\n      top: 0;\n      padding-left: 5px;\n      border-left: 1px solid ', ';\n      cursor: ', ';\n      .action {\n        top: ', ';\n        transform: translateX(-24px);\n        .value {\n          margin-left: 4px;\n        }\n      }\n    }\n\n    .indicator {\n      top: 0;\n      border-left: 1px solid ', ';\n      height: 100vw;\n      .value {\n        margin-left: 2px;\n        margin-top: 4px;\n      }\n    }\n  }\n\n  .v-container {\n    top: ', ';\n    left: 0;\n    width: ', ';\n    height: calc(100% - ', ');\n\n    .line {\n      width: 100vw;\n      left: 0;\n      padding-top: 5px;\n      border-top: 1px solid ', ';\n      cursor: ', ';\n      .action {\n        left: ', ';\n        transform: translateY(-24px);\n        flex-direction: column;\n        .value {\n          margin-top: 4px;\n        }\n      }\n    }\n\n    .indicator {\n      border-bottom: 1px solid ', ';\n      width: 100vw;\n      .value {\n        margin-left: 2px;\n        margin-top: -5px;\n        transform-origin: 0 0;\n        transform: rotate(-90deg);\n      }\n    }\n  }\n'], ['\n  position: absolute;\n  width: 100%; /* scrollbar width */\n  height: 100%;\n  z-index: 3; /* \u9700\u8981\u6BD4resizer\u9AD8 */\n  pointer-events: none;\n  font-size: 12px;\n  overflow: hidden;\n  span {\n    line-height: 1;\n  }\n\n  .corner {\n    position: absolute;\n    left: 0;\n    top: 0;\n    width: ', ';\n    height: ', ';\n    border-right: 1px solid ', ';\n    border-bottom: 1px solid ', ';\n    pointer-events: auto;\n    cursor: pointer;\n    transition: all 0.2s ease-in-out;\n    box-sizing: content-box;\n    &.active {\n      background-color: ', ' !important;\n    }\n  }\n\n  .indicator {\n    position: absolute;\n    pointer-events: none;\n    .value {\n      position: absolute;\n      background: white;\n    }\n  }\n\n  .ruler {\n    width: 100%;\n    height: 100%;\n    pointer-events: auto;\n  }\n\n  .line {\n    position: absolute;\n    .action {\n      position: absolute;\n      display: flex;\n      justify-content: center;\n      align-items: center;\n    }\n\n    .value {\n      pointer-events: none;\n      transform: scale(0.83);\n    }\n    .del {\n      cursor: pointer;\n      padding: 3px 5px;\n      visibility: hidden;\n    }\n    &:hover .del {\n      visibility: visible;\n    }\n  }\n\n  .h-container, .v-container {\n    position: absolute;\n    .lines {\n      pointer-events: none;\n    }\n    &:hover .lines {\n      pointer-events: auto;\n    }\n  }\n\n  .h-container {\n    left: ', ';\n    top: 0;\n    width: calc(100% - ', ');\n    height: ', ';\n\n    .line {\n      height: 100vh;\n      top: 0;\n      padding-left: 5px;\n      border-left: 1px solid ', ';\n      cursor: ', ';\n      .action {\n        top: ', ';\n        transform: translateX(-24px);\n        .value {\n          margin-left: 4px;\n        }\n      }\n    }\n\n    .indicator {\n      top: 0;\n      border-left: 1px solid ', ';\n      height: 100vw;\n      .value {\n        margin-left: 2px;\n        margin-top: 4px;\n      }\n    }\n  }\n\n  .v-container {\n    top: ', ';\n    left: 0;\n    width: ', ';\n    height: calc(100% - ', ');\n\n    .line {\n      width: 100vw;\n      left: 0;\n      padding-top: 5px;\n      border-top: 1px solid ', ';\n      cursor: ', ';\n      .action {\n        left: ', ';\n        transform: translateY(-24px);\n        flex-direction: column;\n        .value {\n          margin-top: 4px;\n        }\n      }\n    }\n\n    .indicator {\n      border-bottom: 1px solid ', ';\n      width: 100vw;\n      .value {\n        margin-left: 2px;\n        margin-top: -5px;\n        transform-origin: 0 0;\n        transform: rotate(-90deg);\n      }\n    }\n  }\n']);

var openMenu = keyframes(_templateObject);
var closeMenu = keyframes(_templateObject2);

var StyleMenu = styled.div(_templateObject3, function (props) {
  return props.menuConfigs.bgColor;
}, openMenu, closeMenu, function (props) {
  return props.menuConfigs.dividerColor;
}, function (props) {
  return props.lang === 'ch' ? '82%' : '87%';
}, function (props) {
  return props.menuConfigs.listItem.textColor;
}, function (props) {
  return props.menuConfigs.listItem.bgColor;
}, function (props) {
  return props.menuConfigs.listItem.textColor;
}, function (props) {
  return props.menuConfigs.listItem.disabledTextColor;
}, function (props) {
  return props.menuConfigs.listItem.disabledTextColor;
}, function (props) {
  return props.menuConfigs.listItem.hoverBgColor;
}, function (props) {
  return props.menuConfigs.listItem.hoverTextColor;
}, function (props) {
  return props.menuConfigs.listItem.hoverTextColor;
});

var StyledRuler = styled.div(_templateObject4, function (props) {
  return props.thick + 'px';
}, function (props) {
  return props.thick + 'px';
}, function (props) {
  return props.borderColor;
}, function (props) {
  return props.borderColor;
}, function (props) {
  return props.cornerActiveColor;
}, function (props) {
  return props.thick + 'px';
}, function (props) {
  return props.thick + 'px';
}, function (props) {
  return props.thick + 1 + 'px';
}, function (props) {
  return props.lineColor;
}, function (props) {
  return props.isShowReferLine ? 'ew-resize' : 'none';
}, function (props) {
  return props.thick + 'px';
}, function (props) {
  return props.lineColor;
}, function (props) {
  return props.thick + 'px';
}, function (props) {
  return props.thick + 1 + 'px';
}, function (props) {
  return props.thick + 'px';
}, function (props) {
  return props.lineColor;
}, function (props) {
  return props.isShowReferLine ? 'ns-resize' : 'none';
}, function (props) {
  return props.thick + 'px';
}, function (props) {
  return props.lineColor;
});

/* eslint-disable no-return-assign */

var SELECT_SVG = React.createElement(
  'svg',
  { width: '10', height: '10', xmlns: 'http://www.w3.org/2000/svg' },
  React.createElement('path', { d: 'M1 5.066c0 .211.07.39.212.538L3.346 7.78A.699.699 0 0 0 3.872 8a.69.69 0 0 0 .517-.221l4.39-4.49A.731.731 0 0 0 9 2.753a.717.717 0 0 0-.22-.532A.714.714 0 0 0 8.255 2a.714.714 0 0 0-.524.221l-3.86 3.955L2.26 4.528a.714.714 0 0 0-.524-.221.714.714 0 0 0-.524.221.749.749 0 0 0-.212.538z', fill: '#415058', fillRule: 'evenodd' })
);

var RulerContextMenu = function (_PureComponent) {
  inherits(RulerContextMenu, _PureComponent);

  function RulerContextMenu(props) {
    classCallCheck(this, RulerContextMenu);

    var _this = possibleConstructorReturn(this, (RulerContextMenu.__proto__ || Object.getPrototypeOf(RulerContextMenu)).call(this, props));

    _this.closeMenu = function () {
      var oncloseMenu = _this.props.oncloseMenu;

      oncloseMenu();
    };

    _this.closeMenuMouse = function (e) {
      if (e.button !== 2) return;
      _this.closeMenu();
    };

    _this.onhandleShowRuler = function () {
      var handleShowRuler = _this.props.handleShowRuler;

      handleShowRuler();
    };

    _this.onhandleShowReferLine = function () {
      var handleShowReferLine = _this.props.handleShowReferLine;

      handleShowReferLine();
    };

    _this.onhandleShowSpecificRuler = function () {
      var _this$props = _this.props,
        horLineArr = _this$props.horLineArr,
        verLineArr = _this$props.verLineArr,
        handleLine = _this$props.handleLine,
        vertical = _this$props.vertical;

      var newLines = vertical ? { h: horLineArr, v: [] } : { h: [], v: verLineArr };
      handleLine(newLines);
      _this.closeMenu();
    };

    _this.el = document.createElement('div');
    return _this;
  }

  createClass(RulerContextMenu, [{
    key: 'componentDidMount',
    value: function componentDidMount() {
      document.body.appendChild(this.el);
      document.addEventListener('click', this.closeMenu);
      document.addEventListener('mousedown', this.closeMenuMouse);
    }
  }, {
    key: 'componentWillUnmount',
    value: function componentWillUnmount() {
      document.removeEventListener('mousedown', this.closeMenuMouse);
      document.removeEventListener('click', this.closeMenu);
      document.body.removeChild(this.el);
    }
    // click事件只响应左键，menu里的每部分的点击事件使用的是click，
    // 所以mousedown只能响应右键，否则内部点击事件失效

    // 显示/影藏 ruler

    // 显示/影藏 参考线

    // 删除横向/纵向参考线

  }, {
    key: 'render',
    value: function render() {
      var _props = this.props,
        isShowReferLine = _props.isShowReferLine,
        vertical = _props.vertical,
        verLineArr = _props.verLineArr,
        horLineArr = _props.horLineArr,
        lang = _props.lang,
        menuConfigs = _props.menuConfigs;
      var _props$menuPosition = this.props.menuPosition,
        left = _props$menuPosition.left,
        top = _props$menuPosition.top;

      var isDisabled = vertical ? !verLineArr.length : !horLineArr.length;

      return createPortal(React.createElement(
        StyleMenu,
        {
          style: { left: left, top: top },
          showReferLine: isShowReferLine,
          lang: lang,
          menuConfigs: menuConfigs,
          id: 'contextMenu'
        },
        React.createElement(
          'a',
          {
            className: 'menu-content',
            onClick: this.onhandleShowRuler
          },
          i18nObj[lang].show_ruler,
          SELECT_SVG
        ),
        React.createElement(
          'a',
          {
            className: 'menu-content',
            onClick: this.onhandleShowReferLine
          },
          i18nObj[lang].show_refer_line,
          isShowReferLine && SELECT_SVG
        ),
        React.createElement('div', { className: 'divider' }),
        React.createElement(
          'a',
          {
            className: 'menu-content' + (isDisabled ? ' disabled' : ''),
            onClick: this.onhandleShowSpecificRuler
          },
          i18nObj[lang].remove_all,
          vertical ? i18nObj[lang].horizontal : i18nObj[lang].vertical,
          i18nObj[lang].refer_line
        )
      ), this.el);
    }
  }]);
  return RulerContextMenu;
}(PureComponent);


RulerContextMenu.propTypes = {
  vertical: PropTypes.bool,
  menuPosition: PropTypes.object,
  handleShowRuler: PropTypes.func,
  isShowReferLine: PropTypes.bool,
  handleShowReferLine: PropTypes.func,
  horLineArr: PropTypes.array,
  verLineArr: PropTypes.array,
  handleLine: PropTypes.func,
  oncloseMenu: PropTypes.func,
  lang: PropTypes.string,
  menuConfigs: PropTypes.object
};

var DEFAULTMENU = {
  bgColor: '#fff',
  dividerColor: '#DBDBDB',
  listItem: {
    textColor: '#415058',
    hoverTextColor: '#298DF8',
    disabledTextColor: 'rgba(65, 80, 88, 0.4)',
    bgColor: '#fff',
    hoverBgColor: '#F2F2F2'
  }
};

var SketchRuler = function (_PureComponent) {
  inherits(SketchRuler, _PureComponent);

  function SketchRuler(props) {
    classCallCheck(this, SketchRuler);

    var _this = possibleConstructorReturn(this, (SketchRuler.__proto__ || Object.getPrototypeOf(SketchRuler)).call(this, props));

    _this.handleLineChange = function (arr, vertical) {
      var _this$props = _this.props,
        horLineArr = _this$props.horLineArr,
        verLineArr = _this$props.verLineArr,
        handleLine = _this$props.handleLine;

      var newLines = vertical ? { h: horLineArr, v: [].concat(toConsumableArray(arr)) } : { h: [].concat(toConsumableArray(arr)), v: verLineArr };
      handleLine(newLines);
    };

    _this.onShowRightMenu = function (left, top, vertical) {
      _this.setState({
        isShowMenu: true,
        vertical: vertical,
        positionObj: {
          x: left,
          y: top
        }
      });
    };

    _this.onhandlecloseMenu = function () {
      _this.setState({ isShowMenu: false });
    };

    var ratio = props.ratio,
      palette = props.palette;

    var menu = palette.menu || DEFAULTMENU;
    _this.canvasConfigs = {
      ratio: ratio,
      bgColor: palette.bgColor,
      longfgColor: palette.longfgColor,
      shortfgColor: palette.shortfgColor,
      fontColor: palette.fontColor,
      shadowColor: palette.shadowColor,
      lineColor: palette.lineColor,
      borderColor: palette.borderColor,
      cornerActiveColor: palette.cornerActiveColor
    };
    _this.menuConfigs = {
      bgColor: menu.bgColor,
      dividerColor: menu.dividerColor,
      listItem: menu.listItem
    };
    _this.state = {
      isShowMenu: false,
      vertical: false,
      positionObj: {
        x: 0,
        y: 0
      }
    };
    return _this;
  }
  // 展示右键菜单


  createClass(SketchRuler, [{
    key: 'preventDefault',

    // 取消默认菜单事件
    value: function preventDefault(e) {
      e.preventDefault();
    }
  }, {
    key: 'render',
    value: function render() {
      var _props = this.props,
        width = _props.width,
        height = _props.height,
        scale = _props.scale,
        handleLine = _props.handleLine,
        thick = _props.thick,
        shadow = _props.shadow,
        startX = _props.startX,
        startY = _props.startY,
        cornerActive = _props.cornerActive,
        horLineArr = _props.horLineArr,
        verLineArr = _props.verLineArr,
        onCornerClick = _props.onCornerClick,
        bgColor = _props.palette.bgColor,
        lang = _props.lang,
        isOpenMenuFeature = _props.isOpenMenuFeature,
        handleShowRuler = _props.handleShowRuler,
        isShowReferLine = _props.isShowReferLine,
        handleShowReferLine = _props.handleShowReferLine;
      var _state = this.state,
        positionObj = _state.positionObj,
        vertical = _state.vertical,
        isShowMenu = _state.isShowMenu;
      var x = shadow.x,
        y = shadow.y,
        w = shadow.width,
        h = shadow.height;


      var commonProps = {
        scale: scale,
        canvasConfigs: this.canvasConfigs,
        onLineChange: this.handleLineChange,
        onShowRightMenu: this.onShowRightMenu,
        isShowReferLine: isShowReferLine,
        handleShowReferLine: handleShowReferLine
      };

      var menuPosition = {
        left: positionObj.x,
        top: positionObj.y
      };

      return React.createElement(
        StyledRuler,
        _extends({ id: 'mb-ruler', className: 'mb-ruler', isShowReferLine: isShowReferLine, thick: thick }, this.canvasConfigs, {
          onContextMenu: this.preventDefault }),
        React.createElement(RulerWrapper, _extends({ width: width, height: thick, start: startX, lines: horLineArr, selectStart: x, selectLength: w }, commonProps)),
        React.createElement(RulerWrapper, _extends({ width: thick, height: height, start: startY, lines: verLineArr, selectStart: y, selectLength: h, vertical: true }, commonProps)),
        React.createElement('a', { className: 'corner' + (cornerActive ? ' active' : ''), style: { backgroundColor: bgColor }, onClick: onCornerClick }),
        isOpenMenuFeature && isShowMenu && React.createElement(RulerContextMenu, {
          key: String(menuPosition.left) + String(menuPosition.top),
          lang: lang,
          vertical: vertical,
          handleLine: handleLine,
          horLineArr: horLineArr,
          verLineArr: verLineArr,
          menuPosition: menuPosition,
          handleShowRuler: handleShowRuler,
          isShowReferLine: isShowReferLine,
          handleShowReferLine: handleShowReferLine,
          oncloseMenu: this.onhandlecloseMenu,
          menuConfigs: this.menuConfigs
        })
      );
    }
  }]);
  return SketchRuler;
}(PureComponent);

SketchRuler.propTypes = {
  scale: PropTypes.number,
  ratio: PropTypes.number,
  thick: PropTypes.number,
  width: PropTypes.number,
  height: PropTypes.number,
  startX: PropTypes.number,
  startY: PropTypes.number,
  shadow: PropTypes.object,
  horLineArr: PropTypes.array,
  verLineArr: PropTypes.array,
  handleLine: PropTypes.func,
  cornerActive: PropTypes.bool,
  onCornerClick: PropTypes.func,
  lang: PropTypes.string,
  isOpenMenuFeature: PropTypes.bool,
  handleShowRuler: PropTypes.func,
  isShowReferLine: PropTypes.bool,
  handleShowReferLine: PropTypes.func,
  palette: PropTypes.shape({
    bgColor: PropTypes.string,
    longfgColor: PropTypes.string,
    shortfgColor: PropTypes.string,
    fontColor: PropTypes.string,
    shadowColor: PropTypes.string,
    lineColor: PropTypes.string,
    borderColor: PropTypes.string,
    cornerActiveColor: PropTypes.string,
    menu: PropTypes.shape({
      bgColor: PropTypes.string, // menu菜单
      dividerColor: PropTypes.string, // 分割线
      listItem: PropTypes.shape({ // item
        textColor: PropTypes.string, // 文本
        hoverTextColor: PropTypes.string,
        disabledTextColor: PropTypes.string,
        bgColor: PropTypes.string,
        hoverBgColor: PropTypes.string
      })
    })
  })
};
SketchRuler.defaultProps = {
  isOpenMenuFeature: false,
  isShowReferLine: true,
  handleShowRuler: function handleShowRuler() {},
  handleShowReferLine: function handleShowReferLine() {},
  thick: 16,
  horLineValue: [100, 200],
  verLineValue: [100, 200],
  scale: 1,
  startX: 0,
  startY: 0,
  ratio: window.devicePixelRatio || 1,
  shadow: {
    x: 200,
    y: 100,
    width: 200,
    height: 400
  },
  lang: 'zh-CN',
  palette: {
    bgColor: 'rgba(225,225,225, 0)', // ruler bg color
    longfgColor: '#BABBBC', // ruler longer mark color
    shortfgColor: '#C8CDD0', // ruler shorter mark color
    fontColor: '#7D8694', // ruler font color
    shadowColor: 'rgba(231,147,139,0.3)', // ruler shadow color
    lineColor: 'rgba(231,147,139,0.6)',
    borderColor: '#DADADC',
    cornerActiveColor: 'rgb(235, 86, 72, 0.6)',
    menu: DEFAULTMENU
  }
};

export default SketchRuler;
//# sourceMappingURL=index.es.js.map
